<template>
    <div>
        <el-table
        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%">
            <el-table-column
                label="任务名称"
                prop="name">
            </el-table-column>
            <el-table-column
                label="起始站点"
                prop="start">
            </el-table-column>
            <el-table-column
                label="到达站点"
                prop="end">
            </el-table-column>
            <el-table-column
                label="任务状态"
                prop="status">
            </el-table-column>
            <el-table-column
                label="任务序列"
                prop="sequence">
            </el-table-column>
            <el-table-column
                label="任务种类"
                prop="category">
            </el-table-column>
            <el-table-column
                align="right">
                <template slot="header" slot-scope="scope">
                <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入关键字(任务名)搜索"/>
                </template>
                <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="warning"
                    @click="handleEdit(scope.$index, scope.row)">重发</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">取消</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="任务重发" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="重发类型" :label-width="formLabelWidth">
                <el-select v-model="form.resend" placeholder="请选择重发类型">
                  <el-option label="任务重发(kernel宕机|任务失败[只能是取空托盘到输送线])" value="whole"></el-option>
                  <el-option label="卸载重发(放货路上kernel宕机[所有任务均可])" value="unload"></el-option>
                  <el-option label="取货重发(取货路上kernel宕机[只能是取货从输送线到地堆])" value="load"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
          </el-dialog>
          <el-button icon="el-icon-search" circle @click="getCount" class="search"></el-button>
          <el-button type="success" icon="el-icon-refresh" circle @click="refresh" class="refresh"></el-button>
          <span class="count">当天累计入库{{countDay}}托,当天白班入库{{countDayStart}}托,当天夜班入库{{countDayEnd}}托</span>
          <el-pagination
            small
            layout="prev, pager, next"
            :total="totalPage"
            @current-change="handleCurrentChange"
            @prev-click="handlePrevClick"
            @next-click>="handleNextClick"
          </el-pagination>
    </div>
  </template>
  
  <script>
    import axios from "axios";

    export default {
      data() {
        return {
          tableData: [],
          search:'',
          dialogFormVisible: false,
          task:{},
          form: {
            resend: '',
          },
          formLabelWidth: '120px',
          totalPage:0,
          countDay:0,
          countDayStart:0,
          countDayEnd:0,
          page:1
        }
      },
      methods: {
        getCount(){
            axios({
                url:'http://127.0.0.1:9998/getCount',
            }).then(data=>{
                if(data.data==null||data.data==""){
                    console.log("查询入库失败");
                }else{
                    let result = data.data;
                    this.countDay=result[0];
                    this.countDayStart=result[1];
                    this.countDayEnd=result[2];
                }
            }).catch(err=>{
                console.log(err);
            })
        },
        refresh(){
            axios({
                url:'http://127.0.0.1:9998/showTaskInfo?page='+this.page+'&pageSize='+5,
            }).then(data=>{
                if(data.data==null||data.data==""){
                    console.log("没有任务所以没有数据");
                }else{
                    let result = data.data.list;
                    this.totalPage = data.data.navigatepageNums.length*10;
                    // let result = JSON.parse(data.data);
                    if (this.tableData.length==0){
                        for (let task of result){
                            this.tableData.push(task);
                        }
                    }else{
                        this.tableData.splice(0,this.tableData.length);
                        for (let task of result){
                            this.tableData.push(task);
                        }
                    }
                }
            }).catch(err=>{
                console.log(err);
            })
        },
        handleCurrentChange(currentPage){//将数据发送给后端
            this.page=currentPage;
            axios({
                url:'http://127.0.0.1:9998/showTaskInfo?page='+currentPage+'&pageSize='+5,
            }).then(data=>{
                if(data.data==null||data.data==""){
                    console.log("没有任务所以没有数据");
                }else{
                    let result = data.data.list;
                    this.totalPage = data.data.navigatepageNums.length*10;
                    // let result = JSON.parse(data.data);
                    if (this.tableData.length==0){
                        for (let task of result){
                            this.tableData.push(task);
                        }
                    }else{
                        this.tableData.splice(0,this.tableData.length);
                        for (let task of result){
                            this.tableData.push(task);
                        }
                    }
                }
            }).catch(err=>{
                console.log(err);
            })
        },
        handlePrevClick(currentPage){
            this.page=currentPage;
            axios({
                url:'http://127.0.0.1:9998/showTaskInfo?page='+currentPage+'&pageSize='+5,
            }).then(data=>{
                if(data.data==null||data.data==""){
                    console.log("没有任务所以没有数据");
                }else{
                    let result = data.data.list;
                    this.totalPage = data.data.navigatepageNums.length*10;
                    // let result = JSON.parse(data.data);
                    if (this.tableData.length==0){
                        for (let task of result){
                            this.tableData.push(task);
                        }
                    }else{
                        this.tableData.splice(0,this.tableData.length);
                        for (let task of result){
                            this.tableData.push(task);
                        }
                    }
                }
            }).catch(err=>{
                console.log(err);
            })
        },
        handleNextClick(currentPage){
            this.page=currentPage;
            axios({
                url:'http://127.0.0.1:9998/showTaskInfo?page='+currentPage+'&pageSize='+5,
            }).then(data=>{
                if(data.data==null||data.data==""){
                    console.log("没有任务所以没有数据");
                }else{
                    let result = data.data.list;
                    this.totalPage = data.data.navigatepageNums.length*10;
                    // let result = JSON.parse(data.data);
                    if (this.tableData.length==0){
                        for (let task of result){
                            this.tableData.push(task);
                        }
                    }else{
                        this.tableData.splice(0,this.tableData.length);
                        for (let task of result){
                            this.tableData.push(task);
                        }
                    }
                }
            }).catch(err=>{
                console.log(err);
            })
        },
        handleEdit(index, row) {
            this.dialogFormVisible = true;
            this.task=row;//将row交给task
            console.log(this.task);
        },
        cancel(){
            this.dialogFormVisible = false;
            this.$message('已取消');
            this.task={};
            console.log(this.task);
        },
        confirm(){
            if(this.form.resend==""){
                this.$message({message: '请至少选择一项',type: 'warning'});
            }else{
                axios({
                url:'http://127.0.0.1:9998/resend?id='+this.task.id+'&resend='+this.form.resend,
                }).then(data=>{
                    this.$message({type: 'success',message: '操作成功!'});
                }).catch(err=>{
                    console.log(err);
                })
                this.dialogFormVisible = false;
                location.reload();
            }
        },
        handleDelete(index, row) {
            this.$confirm('操作条件(kernel宕机后由人工完成任务),请谨慎操作', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    /*所有的异步请求都时在此完成*/
                    url:'http://127.0.0.1:9998/cancel?id='+row.id,
                    method:"get",
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(data=>{
                    this.$message({type: 'success',message: '操作成功!'});
                    location.reload();
                }).catch(err=>{
                    console.log("操作时发生错误"+err);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            })
        }    
      },
       /*vue的钩子函数，在初始化时建立websocket的连接*/
        created() {
            axios({
                url:'http://127.0.0.1:9998/showTaskInfo?page='+this.page+'&pageSize='+5,
            }).then(data=>{
                if(data.data==null||data.data==""){
                    console.log("没有任务所以没有数据");
                }else{
                    let result = data.data.list;
                    this.totalPage = data.data.navigatepageNums.length*10;
                    // let result = JSON.parse(data.data);
                    if (this.tableData.length==0){
                        for (let task of result){
                            this.tableData.push(task);
                        }
                    }else{
                        this.tableData.splice(0,this.tableData.length);
                        for (let task of result){
                            this.tableData.push(task);
                        }
                    }
                }
            }).catch(err=>{
                console.log(err);
            })
            axios({
                url:'http://127.0.0.1:9998/getCount',
            }).then(data=>{
                if(data.data==null||data.data==""){
                    console.log("查询入库失败");
                }else{
                    let result = data.data;
                    this.countDay=result[0];
                    this.countDayStart=result[1];
                    this.countDayEnd=result[2];
                }
            }).catch(err=>{
                console.log(err);
            })
        },
    }
  </script>
  <style scoped>
      @import url("//unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css");
      .el-pagination{
          position: fixed;
          right: 0px;
          bottom: 20px;
      }
      .refresh{
          position: fixed;
          left: 240px;
          bottom: 30px;
      }
      .search{
          position: fixed;
          left: 310px;
          bottom: 30px;
      }
      .count{
          position: fixed;
          left: 370px;
          bottom: 43px;
          font-family:'Courier New', Courier, monospace;
          font-size: 15px;
      }
  </style>